<template>
  <WidgetEditFormContainer v-model="innerDialogShow" :inline="inline">
    <q-card class="full-width">
      <template v-if="mode==='create'">
        <q-img src="../assets/PreviewWeatherWidget.png" alt="" :ratio="5/3"></q-img>
        <q-card-section>
          <div class="text-h6">天气组件</div>
          <div>查看一下当天的天气情况~ 🌄</div>
        </q-card-section>
      </template>
      <template v-if="mode==='update'">
        <q-card-section>
          <div class="text-h6">编辑天气组件</div>
        </q-card-section>
      </template>
      <q-form
          @submit="submit"
          class="q-gutter-md"
      >
        <q-card-section class="q-pt-none">
          <q-select class="q-mb-sm"
                    v-model="currentProvince"
                    :options="provinces"
                    filled label="省份"
                    lazy-rules
                    :rules="[val=>val || '省份不可为空']"
          />
          <q-select class="q-mb-sm"
                    v-model="currentCity"
                    :options="cities"
                    filled label="城市"
                    :rules="[val=>val || '城市不可为空']"
          />
        </q-card-section>
        <q-separator></q-separator>
        <q-card-section>
          <q-btn v-if="mode==='create'" color="green" icon-right="add" class="full-width"
                 type="submit">确认添加
          </q-btn>
          <q-btn v-if="mode==='update'" color="green" class="full-width"
                 type="submit">保存编辑
          </q-btn>
        </q-card-section>
      </q-form>
    </q-card>
  </WidgetEditFormContainer>
</template>

<script>
import form from 'src/mixins/form'
import iInfo from '../../../../api/info'
import { genWidgetId } from '../../../../utils/widget'
import WidgetEditFormContainer from '../../components/WidgetEditFormContainer'

export default {
  name: 'WeatherEditForm',
  mixins: [form],
  components: {
    WidgetEditFormContainer
  },
  props: {
    defaultFormData: {
      type: Object,
      default: () => ({ data: {} })
    }
  },
  data () {
    return {
      provinces: [],
      currentProvince: null,
      currentCity: null,
      options: this.modelValue.data || {}
    }
  },
  computed: {
    cities () {
      if (this.currentProvince) {
        return this.currentProvince.cities.map(e => {
          e.value = e.id
          e.label = e.cityName
          return e
        })
      }
      return []
    }
  },
  watch: {
    currentProvince (newValue, oldValue) {
      if (oldValue) {
        this.currentCity = null
      }
    }
  },
  async mounted () {
    const provinces = await iInfo.city()
    this.provinces = provinces.map(e => {
      e.value = e.id
      e.label = e.cityName
      return e
    })
    if (this.options.province) {
      this.currentProvince = this.provinces.find(e => e.id === this.options.province.id)
      if (this.options.city) {
        this.currentCity = this.currentProvince.cities.find(e => e.id === this.options.city.id)
      }
    }
  },
  methods: {
    async submit () {
      this.formData.data = {
        province: {
          id: this.currentProvince.id,
          name: this.currentProvince.label
        },
        city: {
          id: this.currentCity.id,
          name: this.currentCity.label,
          cityCode: this.currentCity.cityCode
        }
      }
      if (this.mode === 'create') {
        await this.createWidget({
          id: genWidgetId('WEATHER_WIDGET'),
          type: 'WeatherWidget',
          w: 2,
          h: 1
        })
      }
      if (this.mode === 'update') {
        await this.saveWidget()
      }
    }
  }
}
</script>

<style scoped>
</style>
